﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>亿把豆</title>
<style>
	html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,input,p,blockquote,th,td,form{margin:0;padding:0}
	li{list-style:none}
	address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal}
	img{border:0}
	caption,th{text-align:left}
	input,select,textarea{font-size:12px;color:#333;font-family:'lucida grande',taho,verdana,'trebuchet ms',sans-serif}
	html{background:#fff;width:100%}
	body{text-align:left;font:12px/1.2 Arial,SimSun,Helvetica,sans-serif;position:relative;color:#333}
	a{color:#666666;text-decoration:none;}
	img{width:190px;height:180px;}
	.displays{display:none;}
</style>
<script type="text/javascript">
var curSection = 1;
function changeCurrentSection(i)
{
	curSection = i;
	for (var num=1;num<6;num++)
	{
		document.getElementById("img"+num).style.display="none";
		document.getElementById("sect"+num).style.background="";
		document.getElementById("sect"+num).style.color="#666666";
	}
	document.getElementById("img"+i).style.display="block";
	document.getElementById("sect"+i).style.background="#2F549F";
	document.getElementById("sect"+i).style.color="#ffffff";
}
function getElementIntValue(id)
{
	return parseInt(document.getElementById(id).value);
}

// 截面周长
function getPerimeter()
{
	var perimeter = 0.0;
	if (curSection == 1)
	{
		perimeter = getElementIntValue("s1b") + getElementIntValue("s1h");
		perimeter *= 2;
		perimeter /= 1000;// mm转化为m
	}
	else if (curSection == 2)
	{
		var pi = Math.PI;
		perimeter = getElementIntValue("s2d") * pi;
		perimeter /= 1000;
	}
	else if (curSection == 3)
	{
		perimeter = getElementIntValue("s3b") + getElementIntValue("s3h");
		perimeter *= 2;
		perimeter /= 1000;
	}
	else if (curSection == 4)
	{
		perimeter = getElementIntValue("s4b") + getElementIntValue("s4h");
		perimeter *= 2;
		perimeter /= 1000;
	}
	else if (curSection == 5)
	{
		perimeter = document.getElementById("s5p").value;
	}
	return perimeter;
}
// 截面周长字符串
function getPerimeterText()
{
	var perimeterText = 0.0;
	if (curSection == 1)
	{
		perimeterText = "(" + getElementIntValue("s1b")/1000 + "+" + getElementIntValue("s1h")/1000 + ")*2";
	}
	else if (curSection == 2)
	{
		perimeterText = getElementIntValue("s2d")/1000 + "*3.14";
	}
	else if (curSection == 3)
	{
		perimeterText = "(" + getElementIntValue("s3b")/1000 + "+" + getElementIntValue("s3h")/1000 + ")*2";
	}
	else if (curSection == 4)
	{
		perimeterText = "(" + getElementIntValue("s4b")/1000 + "+" + getElementIntValue("s4h")/1000 + ")*2";
	}
	else if (curSection == 5)
	{
		perimeterText = document.getElementById("s5p").value;
	}
	return perimeterText;
}
function setCustomPerimeter(perimeter)
{
	document.getElementById("s5p").value = perimeter;
}
// 截面面积
function getArea()
{
	var area = 0.0;
	if (curSection == 1)
	{
		area = getElementIntValue("s1b") * getElementIntValue("s1h");
		area /= 1000000;// mm2转化为m2
	}
	else if (curSection == 2)
	{
		var pi = Math.PI;
		area = getElementIntValue("s2d") / 2;// 半径
		area = area * area * pi;
		area /= 1000000;
	}
	else if (curSection == 3)
	{
		area = getElementIntValue("s3b") * getElementIntValue("s3h1");
		area += getElementIntValue("s3b1") * getElementIntValue("s3h2");
		area /= 1000000;
	}
	else if (curSection == 4)
	{
		area = getElementIntValue("s4b") * getElementIntValue("s4h1");
		area += getElementIntValue("s4b2") * getElementIntValue("s4h2");
		area /= 1000000;
	}
	else if (curSection == 5)
	{
		area = document.getElementById("s5a").value;
	}
	return area;
}
// 截面面积字符串
function getAreaText()
{
	var areaText = 0.0;
	if (curSection == 1)
	{
		areaText = getElementIntValue("s1b")/1000 + "*" + getElementIntValue("s1h")/1000;
	}
	else if (curSection == 2)
	{
		areaText = getElementIntValue("s2d")/2000 + "^2*" + 3.14;
	}
	else if (curSection == 3)
	{
		areaText = "(" + getElementIntValue("s3b")/1000 + "*" + getElementIntValue("s3h1")/1000 + "+"
				+ getElementIntValue("s3b1")/1000 + "*" + getElementIntValue("s3h2")/1000 + ")";
	}
	else if (curSection == 4)
	{
		areaText = "(" + getElementIntValue("s4b")/1000 + "*" + getElementIntValue("s4h1")/1000 + "+"
				+ getElementIntValue("s4b2")/1000 + "*" + getElementIntValue("s4h2")/1000 + ")";
	}
	else if (curSection == 5)
	{
		areaText = document.getElementById("s5a").value;
	}
	return areaText;
}
function setCustomArea(area)
{
	document.getElementById("s5a").value = area;
}

function getIsChecked(id)
{
	return document.getElementById(id).checked;
}
// 是否输出展开面积
function getIsAreaChecked()
{
	return Boolean(getIsChecked("area"));
}
// 是否输出体积
function getIsVolumeChecked()
{
	return Boolean(getIsChecked("volume"));
}

function syncSectionData(id,val)
{
	if (id == "s3b1" || id == "s3b2")
	{
		document.getElementById("s3b").value = getElementIntValue("s3b1") + getElementIntValue("s3b2");
	}
	else if (id == "s3b")
	{
		document.getElementById("s3b2").value = parseInt(val) - getElementIntValue("s3b1");
	}
	else if (id == "s3h1" || id == "s3h2")
	{
		document.getElementById("s3h").value = getElementIntValue("s3h1") + getElementIntValue("s3h2");
	}
	else if (id == "s3h")
	{
		document.getElementById("s3h2").value = parseInt(val) - getElementIntValue("s3h1");
	}
	else if (id == "s4b1" || id == "s4b2" || id == "s4b3")
	{
		document.getElementById("s4b").value = 
		getElementIntValue("s4b1") + getElementIntValue("s4b2") + getElementIntValue("s4b3");
	}
	else if (id == "s4b")
	{
		document.getElementById("s4b3").value = parseInt(val) - getElementIntValue("s4b1") - getElementIntValue("s4b2");
	}
	else if (id == "s4h1" || id == "s4h2")
	{
		document.getElementById("s4h").value = getElementIntValue("s4h1") + getElementIntValue("s4h2");
	}
	else if (id == "s4h")
	{
		document.getElementById("s4h2").value = parseInt(val) - getElementIntValue("s4h1");
	}
}
</script>
</head>
<body>
<div style="width:50px;float:left;">
	<fieldset id="catalog" style="height:245px;">
		<legend><a name='section'>形状</a></legend>
		<ul id="hidesection">
			<li>&#8226; <a href="javascript:changeCurrentSection(1);" id="sect1">矩形</a></li>
			<li>&#8226; <a href="javascript:changeCurrentSection(2);" id="sect2">圆形</a></li>
			<li>&#8226; <a href="javascript:changeCurrentSection(3);" id="sect3">L形</a></li>
			<li>&#8226; <a href="javascript:changeCurrentSection(4);" id="sect4">T形</a></li>
			<li>&#8226; <a href="javascript:changeCurrentSection(5);" id="sect5">自定义</a></li>
		</ul>
	</fieldset>
</div>
<div style="width:200px;float:left;">
	<fieldset id="images" style="height:243px;">
		<div id="img1" >
			<img src="images/juxing.jpg"><br>
			B:<input id="s1b" type="text" size="5" value="250">
			H:<input id="s1h" type="text" size="5" value="500">
		</div>
		<div id="img2" class="displays">
			<img src="images/yuan.jpg"><br>
			D:<input id="s2d" type="text" size="5" value="300">
		</div>
		<div id="img3" class="displays">
			<img src="images/lxing.jpg"><br>
			B1:<input id="s3b1" type="text" size="5" value="250" onchange="syncSectionData(this.id,this.value)">
			B2:<input id="s3b2" type="text" size="5" value="200" onchange="syncSectionData(this.id,this.value)">
			B:<input id="s3b" type="text" size="5" value="450" onchange="syncSectionData(this.id,this.value)"><br>
			H1:<input id="s3h1" type="text" size="5" value="200" onchange="syncSectionData(this.id,this.value)">
			H2:<input id="s3h2" type="text" size="5" value="400" onchange="syncSectionData(this.id,this.value)">
			H:<input id="s3h" type="text" size="5" value="600" onchange="syncSectionData(this.id,this.value)">
		</div>
		<div id="img4" class="displays">
			<img src="images/txing.jpg"><br>
			B1:<input id="s4b1" type="text" size="5" value="100" onchange="syncSectionData(this.id,this.value)">
			B2:<input id="s4b2" type="text" size="5" value="250" onchange="syncSectionData(this.id,this.value)"><br>
			B3:<input id="s4b3" type="text" size="5" value="100" onchange="syncSectionData(this.id,this.value)">
			B:<input id="s4b" type="text" size="5" value="450" onchange="syncSectionData(this.id,this.value)"><br>
			H1:<input id="s4h1" type="text" size="5" value="200" onchange="syncSectionData(this.id,this.value)">
			H2:<input id="s4h2" type="text" size="5" value="400" onchange="syncSectionData(this.id,this.value)">
			H:<input id="s4h" type="text" size="5" value="600" onchange="syncSectionData(this.id,this.value)">
		</div>
		<div id="img5" class="displays">
			<img src="images/zdy.jpg"><br>
			周长:<input id="s5p" type="text" size="5" readonly value="1.5">m<br>
			面积:<input id="s5a" type="text" size="5" readonly value="0.125">m2<br>
			<button style="width: 70px; font-size: 12px;" onclick="external.OnBnClickedMakeSection()">量取截面</button>
		</div>
	</fieldset>
</div>
<div style="clear:both;"></div>
<div>
	<input id="area" type="checkbox" checked>展开面积(m2) </input>
	<input id="volume" type="checkbox" checked>体积(m3)</input>
</div>
<script type="text/javascript">
changeCurrentSection(curSection);
</script>
</body>
</html>